import {
  Avatar,
  Box,
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
  Divider,
  ListItem,
  ListItemAvatar,
  ListItemText,
  List,
  Paper,
} from "@mui/material";
import Face4Icon from "@mui/icons-material/Face4";
import BookmarkAddedIcon from "@mui/icons-material/BookmarkAdded";
import PinDropIcon from "@mui/icons-material/PinDrop";
import AutoStoriesIcon from "@mui/icons-material/AutoStories";
import ComputerIcon from "@mui/icons-material/Computer";
import React from "react";
import AccessAlarmsIcon from "@mui/icons-material/AccessAlarms";
import { useState } from "react";
import "./CourseCard.css";
export default function CourseCard(props) {
  const [open, setOpen] = useState(false);

  const height = props.length === 0 ? "0px" : (1.0 / props.length) * 100 + "%";

  //
  const colors = [
    {
      bac: "#fdebdd", //1
      word: "#cf6f5c",
    },
    {
      bac: "#e6f4ff", //2
      word: "#3ba7d5",
    },
    {
      bac: "#defbf7", //3
      word: "#6caead",
    },
    {
      bac: "#eeedff", //4
      word: "#8a86c6",
    },
    {
      bac: "#fcebcd", //5
      word: "#e29e28",
    },
    {
      bac: "#ffeff0", //6
      word: "#bb6d82",
    },
    {
      bac: "#eaf2ff", //7
      word: "#6e8ec2",
    },
    {
      bac: "#ffeef8", //8
      word: "#dc7bb2",
    },
    {
      bac: "#e6f4ff", //9
      word: "#2a9ccd",
    },
    {
      bac: "#fff9c9", //10
      word: "#beb83d",
    },
    {
      bac: "#faedff", //11
      word: "#a26ec2",
    },
    {
      bac: "#f4f2fd", //12
      word: "#7e8bc0",
    },
  ];
  // const index = Math.round(Math.random() * 100) % 12;
  const handleClose = () => {
    setOpen(false);
  };
  const handleOpen = () => {
    setOpen(true);
  };

  return (
    <>
      <Box
        sx={{
          opacity: 0.9,
          width: "100%",
          flexDirection: "column",
          display: "flex",
          height: height,
          cursor: "pointer",
        }}
        onClick={handleOpen}
      >
        <Paper
          sx={{
            // height: { height },
            height: "100%",
            margin: "2px",
            background: colors[[props.color]].bac,
            color: colors[[props.color]].word,
            borderRadius: "7%",
            display: "flex",
            flexDirection: "column",
            // alignItems: "center",
            // justifyContent: "center",
            overflow: "hidden",
            padding: "10px",
          }}
          className="courseCard"
        >
          <Box
            sx={{ WebkitLineClamp: Math.ceil(3 / props.length) }}
            className="contentText"
          >
            {props.sch.name}
          </Box>
        </Paper>
      </Box>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">{props.sch.name}</DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            <List>
              <ListItem>
                <ListItemAvatar>
                  <Avatar
                    sx={{ color: "common.white", bgcolor: "primary.main" }}
                  >
                    <AccessAlarmsIcon
                    // color="white"
                    // color="primary"
                    // sx={{ background: "red" }}
                    />
                  </Avatar>
                </ListItemAvatar>
                <ListItemText
                  sx={{ minWidth: 300 }}
                  primary={
                    "上课日期: 第" +
                    props.sch.time.weeks?.map((value, key) => {
                      return value;
                    }) +
                    "周"
                  }
                />
              </ListItem>
              <Divider />
              <ListItem>
                <ListItemAvatar>
                  <Avatar
                    sx={{ color: "common.white", bgcolor: "primary.main" }}
                  >
                    <AutoStoriesIcon />
                  </Avatar>
                </ListItemAvatar>
                <ListItemText
                  sx={{ minWidth: 300 }}
                  primary={"课序号: " + props.sch.courseId}
                  // secondary={props.teacher}
                />
              </ListItem>
              <Divider />
              <ListItem>
                <ListItemAvatar>
                  <Avatar
                    sx={{ color: "common.white", bgcolor: "primary.main" }}
                  >
                    <Face4Icon />
                  </Avatar>
                </ListItemAvatar>
                <ListItemText
                  sx={{ minWidth: 300 }}
                  primary={"上课老师: " + props.sch.teacher}
                  // secondary={props.teacher}
                />
              </ListItem>
              <Divider />
              <ListItem>
                <ListItemAvatar>
                  <Avatar
                    sx={{ color: "common.white", bgcolor: "primary.main" }}
                  >
                    <PinDropIcon />
                  </Avatar>
                </ListItemAvatar>
                <ListItemText
                  sx={{ minWidth: 300 }}
                  primary={"上课地点: " + props.sch.location}
                  // secondary={props.teacher}
                />
              </ListItem>{" "}
              <Divider />
              <ListItem>
                <ListItemAvatar>
                  <Avatar
                    sx={{ color: "common.white", bgcolor: "primary.main" }}
                  >
                    <ComputerIcon />
                  </Avatar>
                </ListItemAvatar>
                <ListItemText
                  sx={{ minWidth: 300 }}
                  primary={"课程类型: " + props.sch.type}
                  // secondary={props.teacher}
                />
              </ListItem>
              <Divider />
              <ListItem>
                <ListItemAvatar>
                  <Avatar
                    sx={{ color: "common.white", bgcolor: "primary.main" }}
                  >
                    <BookmarkAddedIcon />
                  </Avatar>
                </ListItemAvatar>
                <ListItemText
                  sx={{ minWidth: 300 }}
                  primary={"学分: " + props.sch.credit}
                  // secondary={props.teacher}
                />
              </ListItem>
            </List>
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button variant="outlined" onClick={handleClose}>
            知道了
          </Button>
        </DialogActions>
      </Dialog>
    </>
  );
}
